<script setup>
import { ref } from "vue";
import { areaList } from '@vant/area-data';
// 返回
const onClickLeft = () => history.back();
// 收货地址
const show = ref(false);
const showPopup = () => {
    show.value = true;
};

const changaddress = (e) => {

    address1.value = e.selectedOptions[0].text + e.selectedOptions[1].text + e.selectedOptions[2].text
    console.log(address1.value);
    show.value = false;

}
const changaddress1 = () => {

    show.value = false;

}
// 滑动盒子
const boxes = [
    { id: 1, img: "/public/langer1.png" },
    { id: 2, img: "/public/langer2.png" },
    { id: 3, img: "/public/langer3.png" },
    { id: 4, img: "/public/langer4.png" },
    { id: 5, img: "/public/langer1.png" },
]
// 绑定收货列表
const address = ref('')
const address1 = ref('')
// 结算
// 结算
const onSubmit = () => {
   console.log('结算');
}
</script>
<template>
    <div class="order">
        <!-- 导航 -->
        <van-nav-bar background="#fff" title="订单详情" left-arrow @click-left="onClickLeft" />
        <!-- 选项卡 -->
        <van-tabs v-model:active="activeName" title-active-color="#fef8f9" title-inactive-color="#fff" line-width="0px">
            <!-- 选项1 -->
            <van-tab title="花材" name="a">
                <!-- 地址 -->
                <div class="address">
                    <div>收货地址</div>
                    <input type="text" v-model="address1" placeholder="添加收货地址">
                    <van-icon size="15px" name="arrow" @click="showPopup" />
                </div>
                <div style="background-color: #f6f6f6; height: 10px;"></div>

                <!-- 商品 -->
                <div class="commodity">
                    <div style="text-align: left; font-size: 18px;">共12件商品</div>
                    <div class="list" v-for="item in 3">
                        <div class="left">
                            <div class="left-left">
                                <img src="/public/free01.png" alt="">
                                <div>
                                    <div>玫瑰单枝</div>
                                    <div style="color: #bababa;">零售</div>
                                </div>
                            </div>
                        </div>
                        <div class="center">×4</div>
                        <div class="right">￥18.00</div>
                    </div>
                    <div style=" width: 30%;  display: flex; margin-left: 260px;">基准价 <div style="color: #fc6355;">
                            ￥98.80</div>
                    </div>
                    <div style=" margin-top: 15px; width: 30%;  display: flex; margin-left: 260px;">建议价 <div
                            style="color: #fc6355;">￥84.70</div>
                    </div>
                    <div class="address">
                        <div>收货地址</div>
                        <input type="text" placeholder="填写备注">
                        <van-icon size="15px" name="arrow" />
                    </div>
                </div>
                <!-- 滑动盒子 -->
                <div class="container">
                    <div class="container-left">
                        <div class="scroll-container">
                            <div class="one" v-for="item in boxes" :key="item.id">
                                <img :src="item.img" alt="">
                            </div>

                        </div>
                    </div>
                    <div class="container-right">推荐方案</div>
                </div>

                <!-- 结算 -->
                <van-submit-bar :price="1870" button-text="结算" @submit="onSubmit" />
                <!-- 弹出层 -->
                <van-popup v-model:show="show" round position="bottom" :style="{ padding: '10px' }">
                    <van-area @cancel="changaddress1" @confirm="changaddress" title="标题" v-model="address"
                        :area-list="areaList" :columns-placeholder="['省份', '城市', '区县']" /></van-popup>
            </van-tab>
            <!-- 选项2 -->
            <van-tab title="枝数" name="b">
                枝数
            </van-tab>
        </van-tabs>

    </div>
</template>

<style lang="scss">
.order {

    /*导航 */
    .van-nav-bar__content {
        position: relative;
        height: 120px;
        background-color: #f84c55;

        /* 透明度为50% */
        .van-badge__wrapper {
            font-size: 18px;
            top: 20px;
            position: absolute;
            color: #fff;
        }

        .van-nav-bar__title {
            font-size: 18px;
            left: 41%;
            top: 20px;
            position: absolute;
            color: #fff;
        }
    }

    /*选项卡 */
    .van-tabs {
        width: 100%;
        margin: auto;
        position: relative;
        z-index: 1000;
        margin-top: -60px;

        #van-tabs-1-0 {
            margin-top: 1%;
            height: 90%;
            width: 50%;
            box-sizing: border-box;
            padding: 10px;
            border-right: 1px solid #000;
        }

        #van-tabs-1-1 {
            margin-top: 1%;
            height: 90%;
            width: 50%;
            box-sizing: border-box;
            padding: 10px;
        }

        .van-tabs__wrap {
            width: 50%;
            margin: auto;
            border-radius: 30px;

            .van-tab__text {
                color: red;
            }

        }

        .van-tabs__content {
            width: 100%;
            background-color: #fff;

            /*地址*/
            .address {
                width: 95%;
                padding: 10px;
                box-sizing: border-box;
                align-items: center;
                background-color: #f6f6f6;
                margin: auto;
                margin-top: 30px;
                border-radius: 5px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;

                input {
                    border: none;
                    background-color: #f6f6f6;
                }
            }

            /*商品 */
            .commodity {
                padding: 5px;
                box-sizing: border-box;

                .list {
                    margin-top: 10px;
                    padding: 10px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left {
                        width: 50%;

                        .left-left {
                            display: flex;
                            justify-content: left;
                            align-items: center;

                            img {
                                margin-right: 10px;
                                width: 50px;
                                height: 50px;
                            }
                        }
                    }

                    .right {
                        width: 10%;
                    }

                    .right {
                        text-align: right;
                        width: 28%;
                    }
                }
            }

            /*滑动盒子 */
            .container {
                width: 100%;
                background-color: #fff;
                position: fixed;
                bottom: 50px;
                padding: 5px;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                align-items: center;

                .container-left {
                    width: 78%;
                    overflow-x: auto;

                    .scroll-container {
                        display: flex;
                        width: max-content;

                        .one {
                            width: 60px;
                            height: 50px;
                            margin-left: 5px;
                            text-align: center;

                            img {
                                margin-top: 5px;
                                width: 80%;
                                height: 80%;
                            }



                        }
                    }
                }

                .container-right {
                    width: 20%;
                }
            }

            /*结算 */
            .van-submit-bar__bar {
                display: flex;
                justify-content: space-between;

                .van-submit-bar__text {
                    width: 30%;
                    align-items: center;
                    display: flex;
                }
            }
        }
    }
}
</style>
